<template>
  <div>
    <h1>elementthree</h1>
    <el-table :data="list" style="width: 100%">
      <el-table-column
        type="index"
        prop="index"
        label="index"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180" align="center">
      </el-table-column>
      <el-table-column prop="id" label="id" align="center"> </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center">
      </el-table-column>
      <el-table-column prop="times" label="注册时间" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ comDate2(scope.row.times) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 点击弹出的模态框 -->
    <el-dialog title="编辑信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="名字" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
//先引入后使用
export default {
  data() {
    return {
      //模态框里的数据

      index: "", //暂存id的值
      formLabelWidth: "120px",
      form: {
       name:'',
       age:'',
       address:''
      },
      //控制模态开关
      dialogFormVisible: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      list: [
        {
          name: "小王",
          id: 0,
          address: "淄博",
          age: 22,
          times: "1736918468",
        },
        {
          name: "小黑",
          id: 1,
          address: "上海",
          age: 9,
          times: "1736918547",
        },
        {
          name: "小红",
          id: 2,
          address: "淄博",
          age: 44,
          times: "1302585747",
        },
        {
          name: "小栏",
          id: 3,
          address: "东营",
          age: 77,
          times: "1736918547",
        },
        {
          name: "小房",
          id: 4,
          address: "济南",
          age: 22,
          times: "1295068947",
        },
      ],
    };
  },
  methods: {
    //模态框保存
    save() {
      this.dialogFormVisible = true;
      this.list[this.index].name = this.form.name;
      this.list[this.index].age = this.form.age;
      this.list[this.index].address = this.form.address;
    },
    handleEdit(a, b) {
      console.log(a, "a", b, "b");
      this.index = a;
      this.dialogFormVisible = true;
      this.form.name = b.name;
      this.form.age = b.age;
      this.form.address = b.address;
    },
    handleDelete(a, b) {
      console.log(a, "a", b, "b");
      this.list.splice(a, 1);
    },
    //直接用函数计算插槽里的值
    comDate2(val) {
      return moment(Number(val) * 1000).format("YYYY-M-DD");
    },
    comDate() {
      console.log(moment().format("YYYY-MM-DD"), "jjjjjj");

      for (let i = 0; i < this.list.length; i++) {
        //    this.list[i].times= moment(Number(this.list[i].times)*1000).format('YYYY-MM-DD')
        // let v = new Date(this.list[i].times * 1000);
        // let yy = v.getFullYear();
        // let aa = v.getMonth() + 1;
        // let mm = aa < 10 ? "0" + aa : aa;
        // let bb = v.getDate();
        // let dd = bb < 10 ? "0" + bb : bb;
        // console.log(yy, mm, dd, "shijian");
        // this.list[i].times = yy + "年" + mm + "月" + dd + "日";
      }
    },
  },
  created() {},
  mounted() {
    this.comDate();
  },
  computed: {},
};
</script>

<style>
</style>